<template>
    <div class="Course animated fadeInUp" ref='tableRef'>
		<projectlist :title="'微课中心'" :type="2" :projectlist="dataList.PopularCourse" :subtitle="'Microcourse center'">
		</projectlist>
		<div class="paging">
			<el-pagination 
			:pager-count="5"
				background 
				layout="prev, pager, next" 
				:total="dataList.total" 
				:current-page="dataList.page"
				@current-change="changesize" />
		</div>
		
    </div>
</template>

<script setup>
	import { reactive ,onBeforeMount} from 'vue'
	import {getCourse} from '@/api/home.js'
	import projectlist from '@/components/projectList.vue'
	const dataList = reactive({
		page:1,
		tabid:0,
		total:10,
		PopularCourse:[]
	})
	const changesize = (value)=> {
		dataList.page = value
		getPopularCourse()
	}
	onBeforeMount(()=> {
		getPopularCourse()
	})
	const getPopularCourse = () => {
		var data = {
			projectId: 'dxhzalctqitlv9umq3wtdg',
			coursetype: 2,
			page:dataList.page,
			hot: true,
			pagesize: 8
		}
		
		getCourse(data).then(res => {
			console.log(res.totalCount,"9999999999")
			dataList.PopularCourse = JSON.parse(res.list).obj
			dataList.page = res.page
			dataList.total = res.totalCount
			// pageCount
			// totalCount
		})
	}
</script>

<style lang="scss" scoped>
@media screen and (min-width:1200px){
	.Course{
		width: 1200px;
		margin: 0 auto;
		margin-top: 40px;
		min-height: 500px;
	}
	.paging{
		width: 100%;
		margin-bottom: 50px;
		display: flex;
		justify-content: center;
		:deep(.is-active) {
			background-color: #FF9933 !important;
		}
	}
}
@media screen and (max-width: 1200px){
		.Course{
			width: 95vw;
			margin: 0 auto;
			margin-top: 5vw;
			min-height: 61vh;
		}
		.paging{
			width: 95vw;
			margin-bottom: 6vw;
			display: flex;
			justify-content: center;
			:deep(.is-active) {
				background-color: #FF9933 !important;
			}
		}
	}
</style>